<template>
    <div class="bigbox">
        <div>
            <h1>图书列表</h1>
        </div>
        <div>
            <div class="search-box">
                <input type="text" placeholder="请输入关键字" v-model="data.keyword">
                <input type="button" value="搜索" @click="searchBook">
                <input type="button" value=" 添加" @click="$router.push({name:'add'})">
            </div>

            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>

                <tbody>
                    <tr v-for="book in data.books" :key="book.id">

                        <td>{{ book.id }}</td>
                        <td>{{ book.bookName }}</td>
                        <td>{{ book.bookAuthor }}</td>
                        <td>{{ book.bookPrice }}</td>
                        <td>{{ book.bookNum }}</td>

                        <td>
                            <div class="action-buttons"> 
                                <input type="button" value="编辑" @click="$router.push({name:'update',params:{id:book.id}})">
                                <input type="button" value="删除" @click="confirmDel(book.id)">
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted,reactive } from 'vue';

const api = 'http://localhost:8000'

const data = reactive({
    books:[],
    keyword:''
})

//查询全部图书
function queryAllBook() {
    
    axios.get(`${api}/books?keyword=${data.keyword}`).then((res)=>{
        data.books = res.data.data
    })
}

//查询图书
function searchBook() {
    queryAllBook()
}

//确认删除
function confirmDel(id) {
    const isConfirmed = window.confirm('真的要删除图书吗？')
    if (isConfirmed) {
        delBook(id)
    }
}
//删除
function delBook(id) {
    axios.delete(`${api}/book/${id}`).then(()=>{
        queryAllBook()
    })
}

//组件挂载时调用查询函数
onMounted(()=>{
    queryAllBook()
})
</script>

<style scoped>

.bigbox {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

h1 {
    text-align: center;
    color: #333;
}

.search-box {
    display: flex;
    margin-bottom: 20px;
}

.search-box input[type="text"] {
    flex: 1;
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-box input[type="button"] {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

.search-box input[type="button"]:hover {
    background-color: #45a049;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}
tr:hover {
    background-color: #f5f5f5;
}

</style>